<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>入库单详情</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!--标准mui.css-->
        <link rel="stylesheet" href="../../css/mui.min.css">
        <!--App自定义的css-->
        <link rel="stylesheet" type="text/css" href="../../css/app.css" />
        <link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
        <link rel="stylesheet" href="../../css/iconfont.css" />
        <style>
            * { touch-action: none; }
            .mui-card .mui-control-content {
                padding: 10px;
            }

            /*自定义样式*/
            html,body{
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            a{
                color: #ffffff;
            }
            .mui-content{
                width: 100%;
                height: 100%;
                background: #ffffff;
            }
            .mui-bar{
                background:#4F77AA ;
                color: #ffffff;
                -webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
                box-shadow: 0 0 1px rgba(0,0,0,0);
            }
            .mui-title{
                color: #ffffff;
            }
            .mui-content .mui-content-item{
                width:100%;
                height:calc(100% - 70px);
            }
            .mui-content .mui-content-item .mui-control-content{
                width: 100%;
                height:100%;
            }
            .bottom_submit{
                position: absolute;
                width: 100%;
                height: 48px;
                text-align: center;
                line-height: 48px;
                bottom: 0;
                background: #4F77AA;
            }
            input[type=submit]#submit{
                width:100%;
                height:48px;
                line-height: 48px;
                background:#4F77AA ;
                border:none;
                padding: 0;
            }
        
            .mui-input-row label~textarea{
                border:1px solid #c8c7cc;
                width: 60%;
                margin-right: 5%;
            }
            .mui-select-content{
                width:100%;
                height:41px;
                background: #EFEFF4;
            }
            .mui-select{
                width:80%;
                float:left;
            }
            .mui-select select{
                width:100%;
                background: #EFEFF4;
                border-radius: 0;
            }
            .mui-select-content .add_button{
                width: 20%;
                float: right;
                height: 41px;
                text-align: center;
                line-height: 41px;
            }
            .mui-select-content .add_button input{
                display: inline-block;
                width:100%;
                height:100%;
                background: #4f77aa;
                color:#ffffff;
            }
            .mui-control-content .add_detailed{
                width: 20%;
                float: right;
                height: 41px;
                text-align: center;
                line-height: 41px;
            }
            .mui-control-content .add_detailed input{
                display: inline-block;
                width:100%;
                height:100%;
                background: #4f77aa;
                color:#ffffff;
            }
            .mui-ellipsis-title{
                color:#4f77aa;
            }
            .mui-popup-title{
                text-align: left;
            }
            .mui-ellipsis span{
                font-size: 24px;
                padding-left: 25px;
                color:#f8ac59;
            }
            .mui-table-view-cell p{
                padding:5px 0;
            }
            .clear{
                clear: both;
            }
             .mui-content-item .line_x{
            width: 100%;
            height: 8px;
            background: #EFEFF4;
        }
        form .textarea {
		    border: 1px solid #dddddd;
		    float: right;
		    margin-top: 10px;
		}
        </style>
    </head>

    <body>
    <header class="mui-bar mui-bar-nav">
        <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
        <h1 class="mui-title">入库单详情</h1>
    </header>
    <div class="mui-content">
        <div style="padding: 10px 10px;">
            <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                <a class="mui-control-item mui-active" href="#item1">单据信息</a>
                <a class="mui-control-item" href="#item2">备件信息</a>
            </div>
        </div>
        <div class="mui-content-item">
            <div id="item1" class="mui-control-content mui-active">
                <div id="scroll" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <form class="mui-input-group">
                            <div class="mui-input-row">
                                <label>单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>出库类型</label>
                                <input type="text" value="盘点出库" disabled>
                            </div>
                            <!-- <div class="line_x" style=""></div> -->
                            <div class="mui-input-row">
                                <label>部门</label>
                                <input type="text" value="CF2车间" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>仓管员：</label>
                                <input type="text" value="杨洋" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>经办人：</label>
                                <input type="text" value="马天宇" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>客户：</label>
                                <input type="text" value="kk俱乐部" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>采购单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                           
                             <div class="" style="height:40px;padding: 10px 15px;">
                                <label>备注：</label>
                               <textarea class="textarea" id="" rows="5" placeholder="" disabled></textarea>
                            </div>
                             <div class="" style="height:40px;padding: 10px 15px;">
                                <label>备注：</label>
                               <textarea class="textarea" id="" rows="5" placeholder="" disabled></textarea>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div id="item2" class="mui-control-content">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis mui-ellipsis-title'>名称：意美吉双头锯-电磁阀底座</p>
                                    <p class='mui-ellipsis'>备件编号：0001</p>
                                    <p class='mui-ellipsis'>规格型号：52jh</p>
                                    <p class='mui-ellipsis'>入库数量：2</p>
                                </div>
                            </li>
                           <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis mui-ellipsis-title'>名称：意美吉双头锯-电磁阀底座</p>
                                    <p class='mui-ellipsis'>备件编号：0002</p>
                                    <p class='mui-ellipsis'>规格型号：52jh</p>
                                    <p class='mui-ellipsis'>出库数量：2</p>
                                </div>
                            </li>
                             <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis mui-ellipsis-title'>名称：意美吉双头锯-电磁阀底座</p>
                                    <p class='mui-ellipsis'>备件编号：0002</p>
                                    <p class='mui-ellipsis'>规格型号：52jh</p>
                                    <p class='mui-ellipsis'>入库数量：2</p>
                                </div>
                            </li>
                             <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis mui-ellipsis-title'>名称：意美吉双头锯-电磁阀底座</p>
                                    <p class='mui-ellipsis'>备件编号：0002</p>
                                    <p class='mui-ellipsis'>规格型号：52jh</p>
                                    <p class='mui-ellipsis'>入库数量：2</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/jquery-1.11.3.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/mui.picker.min.js"></script>
    <script>
        mui('body').on('tap','a',function(){
            window.top.location.href=this.href;
        });
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        (function($) {
            $('#scroll').scroll({
                indicators: true //是否显示滚动条
            });
            $('#scroll1').scroll({
                indicators: true //是否显示滚动条
            });
            $('#scroll2').scroll({
                indicators: true //是否显示滚动条
            });

            $.init();
        })(mui);
   
        $(document).on("click","span.mui-pull-left",function(){
            window.location.href="putin_list.html";
        })
    </script>

    </body>

    </html>


